<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Sound-U - Votre bibliothèque musicale en ligne</title>
        <link rel="shortcut icon" href="./resources/images/Sound-U-fav.ico"></link>
        <script type="text/javascript" src="./resources/js/music-u.js"></script>

        <!-- Player -->
        <!--<script type="text/javascript" src="./resources/js/jquery.min.js"></script> -->
        <script type="text/javascript" src="./resources/js/speakker-big.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                projekktor('.projekktor');
            });
        </script>
        <!-- Player -->

    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top">
                <div id="divLogo">
                    <table id="logoTable">
                        <tr>
                            <td><a href="faces/listallsongs.xhtml"><img width="65px" src="./resources/images/Sound-U-icon.png" alt="logo"/></a></td>
                            <td valign="top"><h3><a class="logoLink" href="faces/listallsongs.xhtml">Sound-U</a></h3>Votre bibliothèque musicale en ligne</td>
                        </tr>
                    </table>
                </div>

                <div id="userID">
                    <table id="userTable">
                        <tr>
                            <td rowspan="3" width="65px"><a href="#"><img id="userAvatar" src="./resources/images/user_default_icon.png" alt="avatar" title="Changer d'avatar"/></a></td>
                            <td><h2>Bienvenue <ui:insert name="firstname">Prénom</ui:insert>&nbsp;<ui:insert name="lastname">Nom</ui:insert> !</h2></td>
                        </tr>
                        <tr>
                            <td><ui:insert name="email">Email</ui:insert></td>
                        </tr>
                        <tr>
                            <td align="right">
                                <h:form id="formLogout">
                                    <h:commandButton action="#{login.logout}" value="Déconnexion"/>
                                </h:form>
                            </td>
                        </tr>
                    </table>

                </div>
            </ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="left">

                    <h:form>
                        <h4>Menu</h4>
                        <p:menu>
                            <p:menuitem value="Accueil" url="/faces/listallsongs.xhtml" icon="ui-icon-home"/>
                            <p:submenu label="Playlists">
                                <p:menuitem value="Mes playlists" url="/faces/myplaylists.xhtml" icon="ui-icon-star"/>
                                <p:menuitem value="Playlists partagées" url="/faces/sharedplaylists.xhtml" icon="ui-icon-star"/>
                                <p:menuitem value="Playlists publics" url="/faces/publicplaylists.xhtml" icon="ui-icon-star"/>
                            </p:submenu>
                            <p:submenu label="Musiques">
                                <p:menuitem value="Toutes" url="/faces/listallsongs.xhtml" icon="ui-icon-star"/>
                                <p:menuitem value="Par artiste" url="/faces/listArtists.xhtml" icon="ui-icon-star"/>
                                <p:menuitem value="Par album" url="/faces/listAlbums.xhtml" icon="ui-icon-star"/>
                            </p:submenu>
                            <p:submenu label="Social">
                                <p:menuitem value="Amis (#{userSession.user.friends.size()})" url="/faces/friends.xhtml" icon="ui-icon-person"/>
                                <p:menuitem value="Messages (#{userSession.user.notifications.size()})" url="/faces/messages.xhtml" icon="ui-icon-mail-closed"/>
                            </p:submenu>
                        </p:menu>

                    </h:form>

                </ui:insert>
            </div>
            <div>
                <div id="right">
                    <ui:insert name="right">

                        <h:form>
                            <h4>Genres</h4>
                            <p:menu model="#{menuGenre.model}"/>
                        </h:form>

                    </ui:insert>
                </div>
                <div id="content" class="right_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="bottom">&copy;2013 Sound-Universe - Antoine Boulinguez &amp; Shyn-Yuan Cheng</ui:insert>
        </div>

        <audio class="projekktor speakker dark">
            <source src="./resources/js/playlist.json" type="application/json"/>
        </audio>
    </h:body>

</html>
